<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>融弈签</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/swiper.min.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		body,.mui-content {
			background: #fff;
		}
		.mui-bar {
			-webkit-box-shadow: 0 0 1px rgba(91,169,249,0.57);
    		box-shadow: 0 0 1px rgba(91,169,249,0.57);
    		background: #fff;
		}
		.mui-bar-tab .mui-tab-item {
			color: #999999;
		}
		.mui-bar-tab .mui-tab-item.mui-active {
			color: #5D9EE1;
		}
		.tab-bottom-homepage {
			background: url(../img/homePage/homepage-icon.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-active .tab-bottom-homepage {
			background: url(../img/homePage/homepage-icon-active.png) no-repeat;
			background-size: 100% 100%;
		}
		.tab-bottom-mine {
			background: url(../img/homePage/mine-icon.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-active .tab-bottom-mine {
			background: url(../img/homePage/mine-icon-avtive.png) no-repeat;
			background-size: 100% 100%;
		}
		.tab-bottom-customer {
			background: url(../img/homePage/customer-icon.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-active .tab-bottom-customer {
			background: url(../img/homePage/customer-icon-active.png) no-repeat;
			background-size: 100% 100%;
		}
		.banner-div {
			width: 100%;
			height: 240px;
		}
		.swiper-slide {
			height: 240px;
			background-size: 100% 100%;
		}
		.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
			bottom: 20px;
		}
		
		.tabber-div {
			position: relative;
			margin-top: -20px;
			z-index: 2;
			padding: 0 8px;
		}
		.mui-table-view.mui-grid-view {
			border-radius: 10px;
			background: #fff;
			box-shadow: 2px 2px 10px 1px #ccc;
		}
		.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn) {
			padding: 8px 0;
		}
		.mui-grid-view.mui-grid-9 .mui-table-view-cell {
			padding: 0;
			border: none;
		}
		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
			font-size: 14px;
		}
		.tabber-icon {
			margin: 0 auto;
			width: 35px;
			height: 35px;
		} 
		.tabber-icon-visa {
			background: url(../img/homePage/tabber-visa.png) no-repeat;
			background-size: 100% 100%;
		}
		.tabber-icon-ticket {
			background: url(../img/homePage/tabber-ticket.png) no-repeat;
			background-size: 100% 100%;
		}
		.tabber-icon-hotel {
			background: url(../img/homePage/tabber-hotel.png) no-repeat;
			background-size: 100% 100%;
		}
		.tabber-icon-coupon {
			background: url(../img/homePage/tabber-coupon.png) no-repeat;
			background-size: 100% 100%;
		}
		.tabber-icon-plane {
			background: url(../img/homePage/tabber-plane.png) no-repeat;
			background-size: 100% 100%;
		}
		.tabber-icon-car {
			background: url(../img/homePage/tabber-car.png) no-repeat;
			background-size: 100% 100%;
		}
		
		.divide-title {
			margin-top: 20px;
			margin-left: 10px;
			font-size:16px;
			font-family:PingFang SC;
			font-weight:bold;
			color:#333;
		}
		.line-div {
			margin-top: 12px;
			width: 100%;
			height: 1px;
			border-top: 1px solid #E1E1E1;
		}
		
		.grid-ul {
			margin-top: 21px;
			margin-bottom: 15px;
			padding: 0 10px;
			column-count: 2;
		    column-width: 50%;
		    column-gap: 16px;
		}
		.grid-li {
			margin-bottom: 15px;
		 	break-inside: avoid;
		}
		.grid-body {
			position: relative;
		}
		.grid-long-img {
			position: relative;
			height:175px;
		}
		.grid-long-img .grid-img {
			width:100%;
			height:175px;
			border-radius: 8px 8px 0px 0px;
		}
		.grid-short-img {
			position: relative;
			height: 114px;
		}
		.grid-short-img .grid-img {
			width: 100%;
			height: 114px;
			border-radius: 8px 8px 0px 0px;
		}
		.grid-content {
			width: 100%;
			height: 80px;
			padding: 6px;
			box-shadow: 0px 1px 10px 0px rgba(91,169,249,0.57);
			border-radius:0px 0px 8px 8px;
		}
		.grid-title {
			font-size:12px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #333;
		}
		.grid-price {
			margin-top: 6px;
			font-size:14px;
			font-family:PingFang SC;
			font-weight:800;
			color: #FD5C5C;
		}
		.tap-type {
			position: absolute;
			top: 0;
			left: 0;
			width: 48px;
			height: 18px;
			background:rgba(27,27,27,0.6);
			border-bottom-right-radius: 10px;
			border-top-left-radius: 8px;
			font-size: 10px;
			text-align: center;
			color: #fff;
		}
		.tap-address {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 48px;
			height: 18px;
			background:rgba(27,27,27,0.6);
			font-size: 10px;
			text-align: center;
			color: #fff;
			line-height: 18px;
		}
		.tap-address img {
			vertical-align: middle;
			width: 10px;
			height: 13px;
		}
		.tap-address span {
			vertical-align: middle;
		}
		.tap-country {
			position: absolute;
			display: flex;
			bottom: 0;
			left: 0;
			height: 20px;
			width: 60px;
			font-size: 10px;
			color: #fff;
			line-height: 20px;
		}
		.tap-country img {
			width: 30px;
			height: 20px;
		}
		.tap-country span {
			width: 30px;
			height: 20px;
			text-align: center;
			background:rgba(27,27,27,0.6);
		}
		.head-name-back {
			padding-top: 40px;
			width: 100%;
			height: 150px;
			background: #86CAF9;
			text-align: center;
		}
		.head-img-back {
			margin: 0 auto;
			padding: 1px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: #fff;
		}
		.head-img-back img {
			width: 48px;
			height: 48px;
			border-radius: 50%;
		}
		.user-name {
			margin-top: 10px;
			font-size:17px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #fff;
		}
		.order-back {
			margin-top: 10px;
			border: 1px solid rgba(134,202,249, 0.6);
		}
		.order-title {
			margin: 0 10px;
			margin-top: 15px;
			padding-bottom: 8px;
			padding-left: 10px;
			font-size:15px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #666;
			border-bottom: 1px solid #E5E5E5;
		}
		.order-icon-list {
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
			margin-bottom: 20px;
		}
		.order-icon {
			position: relative;
			text-align: center;
		}
		.order-icon img {
			width: 30px;
			height: 30px;
		}
		.order-font {
			margin-top: 10px;
			font-size:14px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #999;
		}
		.meau-list {
			margin-top: 15px;
			border-top: 1px solid rgba(134,202,249, 0.6);
		}
		.meau-li {
			padding: 10px 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(134,202,249, 0.6);
		}
		.meau-name img {
			width: 30px;
			height: 30px;
			vertical-align: middle;
		}
		.meau-name span {
			margin-left: 8px;
			font-size:14px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #666;
			vertical-align: middle;
		}
		.meau-arrow {
			font-size: 18px;
			color: #999;
		}
		
		.mui-bar-nav {
			background: #86CAF9;
		}
		.mui-title {
			color: #fff;
		}
		.customer-ul {
			margin-top: 5px;
			padding: 0 10px;
		}
		.customer-li {
			padding: 15px 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E5E5E5;
		}
		.phone-icon {
			display: flex;
			align-items: center;
		}
		.phone-icon img {
			width: 30px;
			height: 30px;
		}
		.phone-type {
			margin-left: 40px;
			font-size: 14px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #999;
		}
	</style>
</head>
<body>
	<nav id="slider" class="mui-bar mui-bar-tab">
		<a id="homeTab" class="mui-tab-item mui-active" data-id="0" href="#tabbar">
			<span class="mui-icon tab-bottom-homepage"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a id="orderTab" class="mui-tab-item" data-id="1" href="#tabbar-with-chat">
			<span class="mui-icon tab-bottom-mine"></span>
			<span class="mui-tab-label">我的</span>
		</a>
		<a id="mineTab" class="mui-tab-item" data-id="2" href="#tabbar-with-contact">
			<span class="mui-icon tab-bottom-customer"></span>
			<span class="mui-tab-label">客服</span>
		</a>
	</nav>
	<div class="mui-content">
		<div id="tabbar" class="mui-control-content mui-active">
			<div class="banner-div">
				<div class="swiper-container banner">
				    <div class="swiper-wrapper">
				      <!--<div class="swiper-slide" style="background-image:url(../img/homePage/home-beijing.png);"></div>-->
				    </div>
				    <!-- Add Pagination -->
				    <div class="swiper-pagination swiper-pagination-white"></div>
		  		</div>
			</div>
			<div class="tabber-div">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li id="toVisa" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="javascript:void(0);">
	                    <div class="tabber-icon tabber-icon-visa"></div>
	                    <div class="mui-media-body">签证</div></a></li>
		            <li id="toAdmission" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="javascript:void(0);">
	                    <div class="tabber-icon tabber-icon-ticket"></div>
	                    <div class="mui-media-body">门票</div></a></li>
		            <li id="toTravelTicket" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="javascript:void(0);">
	                    <div class="tabber-icon tabber-icon-coupon"></div>
	                    <div class="mui-media-body">周游券</div></a></li>
	                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="javascript:void(0);">
	                    <div class="tabber-icon tabber-icon-hotel"></div>
	                    <div class="mui-media-body">酒店</div></a></li>    
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="javascript:void(0);">
	                    <div class="tabber-icon tabber-icon-plane"></div>
	                    <div class="mui-media-body">机票</div></a></li>
		            <li id="toRentCar" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="javascript:void(0);">
	                    <div class="tabber-icon tabber-icon-car"></div>
	                    <div class="mui-media-body">租车</div></a></li>
		        </ul>
	        </div>
	        <div class="divide-title">精选榜</div>
	        <div class="line-div"></div>
	        <div class="grid-ul">
	        	
	        </div>
		</div>
		<div id="tabbar-with-chat" class="mui-control-content">
			<div class="head-name-back">
				<div class="head-img-back">
					<img id="headImg" src="../img/applicant/header_icon.png" />
				</div>
				<div id="customerName" class="user-name">名称</div>
			</div>
			<div class="order-back">
				<div class="order-title">我的订单</div>
				<div class="order-icon-list">
					<div data-option="0" class="order-icon">
						<img src="../img/homePage/order-all.png" />
						<div class="order-font">全部订单</div>
					</div>
					<div data-option="1" class="order-icon">
						<img src="../img/homePage/order-pending.png" />
						<div class="order-font">待付款</div>
					</div>
					<div data-option="2" class="order-icon">
						<img src="../img/homePage/order-nogo.png" />
						<div class="order-font">未出行</div>
					</div>
					<div data-option="3" class="order-icon">
						<img src="../img/homePage/order-evaluate.png" />
						<div class="order-font">待点评</div>
					</div>
				</div>
			</div>
			<div class="meau-list">
				<div id="toMyCollection" class="meau-li">
					<div class="meau-name">
						<img src="../img/homePage/collection-icon.png" />
						<span>收藏</span>
					</div>
					<div class="meau-arrow">></div>
				</div>
				<div id="toBrowseLog" class="meau-li">
					<div class="meau-name">
						<img src="../img/homePage/history-icon.png" />
						<span>浏览历史</span>
					</div>
					<div class="meau-arrow">></div>
				</div>
				<div id="toRegPhone" class="meau-li">
					<div class="meau-name">
						<img src="../img/homePage/register-icon.png" />
						<span>注册</span>
					</div>
					<div class="meau-arrow">></div>
				</div>
			</div>
		</div>
		<div id="tabbar-with-contact" class="mui-control-content">
			<header id="header" class="mui-bar mui-bar-nav">
				<h1 class="mui-title">客服</h1>
			</header>
			<div class="mui-content">
				<div class="customer-ul">
					<div class="customer-li">
						<div class="phone-icon">
							<img src="../img/homePage/phone-customer-service.png" />
							<div class="phone-type">
								电话客服：<a href="tel://13129330825">13129330825</a>
							</div>
						</div>
					</div>
					<div id="toCustomerService" class="customer-li">
						<div class="phone-icon">
							<img src="../img/homePage/kefu.png" />
							<div class="phone-type">在线客服</div>
						</div>
						<div class="meau-arrow">></div>
					</div>
				</div>
			</div>
		</div>	
	</div>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/swiper.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		var swiper = new Swiper('.swiper-container', {
			spaceBetween: 30,
			effect: 'fade',
			observer:true,//修改swiper自己或子元素时，自动初始化swiper
			observeParents:true,//修改swiper的父元素时，自动初始化swiper
		  	pagination: {
		    	el: '.swiper-pagination',
		    	clickable: true,
		  	},
	    });
	    var customerId = base.getParameter("customerId");
	    $(function() {
	    	//从本地存储获取数据
	    	var headImg = sessionStorage.getItem('headImg');
	    	var customerName = sessionStorage.getItem('customerName');
	    	$("#headImg").attr("src", headImg);
	    	$("#customerName").html(customerName);
	    	getHomePageList();//获取首页列表
	    	getIntroduce();//获取banner数据
	    });
	    //获取首页列表
	    function getHomePageList() {
	    	base.postData(base.url.getHomePageList, {}, function(data) {
	    		if (data.success) {
	    			var homePageList = data.extendData.homePageList;
	    			var flowUp = Math.ceil(homePageList.length/2);
	    			var flowDown = Math.floor(homePageList.length/2); 
	    			var html = '';
	    			var j = 0;
	    			for (var i=0; i<homePageList.length; i++) {
	    				if (i<flowUp) {//瀑布流分两排，循环两次，第一次：长、短、长
		    				var isLast = 0;
		    				if (i==(flowUp-1)) {
		    					isLast = 1;
		    				}
		    				if ((i+1)%2 == 0) {//短
		    					html += pingHomePage(homePageList[i], 0, isLast);
		    				}else {//长
		    					html += pingHomePage(homePageList[i], 1, isLast);
		    				}
	    				}else{//瀑布流分两排，循环两次，第一次：短、长、短
		    				if ((j+1)%2 == 0) {//长
		    					html += pingHomePage(homePageList[i], 1, 0);
		    				}else {
		    					html += pingHomePage(homePageList[i], 0, 0);
		    				}
		    				j++;
	    				}
	    			}
	    			$(".grid-ul").html(html);
	    		} else {
					mui.toast(data.message);
				}
	    	});
	    }
	    function pingHomePage(data, type, isLast) {
	    	var flowType = 'long';
	    	if (type == 0) {
	    		flowType = 'short';
	    	}
	    	var isLastStyle = '';
	    	if (isLast == 1) {
	    		isLastStyle = 'style="padding-bottom: 10px;"';
	    	}
	    	var html = '<div class="grid-li" '+isLastStyle+'>'+
			        	'	<div class="grid-body">'+
			        	'		<input type="hidden" name="objId" value="'+data.objId+'" />'+
			        	'		<input type="hidden" name="listType" value="'+data.type+'" />'+
			        	'		<input type="hidden" name="cuntryId" value="'+data.cuntryId+'" />'+
			        	'		<div  class="grid-'+flowType+'-img">'+
			        	'			<img class="grid-img" src="'+data.imgUrl+'" />';
			        if (data.type == 1) {//门票
			    html += '			<div class="tap-address">'+
			        	'				<img src="../img/homePage/tap-address.png" />'+
				        '				<span>'+data.cityName+'</span>'+
				        '			</div>';   	
			        }else {//签证
			    html +=	'		 	<div class="tap-country">'+
			        	'				<img src="'+data.flagImg+'" />'+
			        	'				<span>'+data.countryName+'</span>'+
			        	'			</div>';    	
			        }
			    html +=	'		</div>'+
			        	'		<div class="grid-content">'+
			        	'			<div class="grid-title mui-ellipsis-2">'+data.name+'</div>'+
			        	'			<div class="grid-price">¥ '+data.price+'</div>'+
			        	'		</div>'+
			        	'		<div class="tap-type">'+(data.type==1?"门票":"签证")+'</div>'+
			        	'	</div>'+
			        	'</div>';
	    	return html;
	    }
	    //获取banner信息图片
		function getIntroduce() {
			base.postData(base.url.getIntroduce, {}, getIntroduceSuccess);
		}
		function getIntroduceSuccess(data) {
			if (data.success) {
				var list = data.extendData.introduceList;
				var html = "";
				for(var index in list) {
					html+='<div class="swiper-slide" style="background-image:url('+list[index].introduceImg+')"></div>';
				}
				$(".banner").find(".swiper-wrapper").html(html);
			}
		}
	    //跳转签证
	    $("#toVisa").on('tap', function() {
	    	window.location.href = "index.html?customerId="+customerId;	
	    });
	    //跳转门票
	    $("#toAdmission").on('tap', function() {
	    	window.location.href = "admission.html?customerId="+customerId;
	    });
	    //跳转周游券
	    $("#toTravelTicket").on('tap', function() {
	    	window.location.href = "travelTicket.html?customerId="+customerId;
	    });
	    //跳转门票或签证详情
	    $(".grid-ul").on('tap', '.grid-li', function() {
	    	var objId = $(this).find("input[name='objId']").val();
	    	var listType = $(this).find("input[name='listType']").val();
	    	if (listType == 1) {//1：门票；2：签证
	    		window.location.href = "admissionInfo.html?ticketsId="+objId+"&customerId="+customerId;
	    	}else{
	    		var cuntryId = $(this).find("input[name='cuntryId']").val();
				window.location.href = "visaDetail.html?goodsId="+objId+"&cuntryId="+cuntryId+"&customerId="+customerId+"&consularDistrictName=";
			}	
	    });
	    //跳转我的收藏
	    $("#toMyCollection").on('tap', function() {
	    	window.location.href = "myCollection.html?customerId="+customerId;
	    });
	    //跳转浏览记录
	    $("#toBrowseLog").on('tap', function() {
	    	window.location.href = "browseLog.html?customerId="+customerId;
	    });
	    //跳转注册页面
	    $("#toRegPhone").on('tap', function() {
	    	window.location.href = "regPhone.html";
	    });
	    //跳转在线客服
	    $("#toCustomerService").on('tap', function() {
	    	window.location.href = "http://www.allin4u.com/kf.html";
	    });
	    //点击进入订单列表
	    $(".order-icon-list").on('tap', '.order-icon', function() {
	    	var orderType = $(this).attr("data-option");
	    	window.location.href = "admissionOrderList.html?customerId="+customerId+"&orderType="+orderType;
	    });
	    //跳转租车
	    $("#toRentCar").on('tap', function() {
	    	window.location.href = "rentCar.html?customerId="+customerId;
	    });
	</script>
</body>
</html>
